import React, { useState } from 'react';
import { useEffect } from 'react';
import { history } from 'umi';
import Menu from './components/menu/index';
import MoveMenu from './components/menuMove';
import logo from '@/assert/image/tab_icon.png';
import iconModule from './components/iconModule';
import BottomMenu from './components/bottomMenu';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
import { notification } from 'antd'
import './index.less';
export default (props) => {
  const { menuList, accessId, bottomAccessList } = props;
  const [menuVisible, setMenuVisible] = useState({ data: {} });
  const [menuMove, setMenuMove] = useState({ data: {} });
  const [showMenu, setShowMenu] = useState(true)
  const filterRouterActive = (list, val) => {
    let data = val || null;
    if (list && list.length) {
      list.forEach((item) => {
        const { subAccessList, id } = item;
        if (accessId == id) {
          setMenuVisible({ data: val ? val : item });
        } else {
          if (item.pid == 0) {
            data = item;
          }
          filterRouterActive(subAccessList, data);
        }
      });
    }
  };
  useEffect(() => {
    reloadRouter();
  }, [menuList, bottomAccessList, accessId]);
  const reloadRouter = () => {
    filterRouterActive([...menuList, ...bottomAccessList]);
  };
  function filterNestedArray(arr, condition) {
    const { subAccessList = [] } = arr;
    if (!subAccessList.length) {
      return notification.warning({
        message: '温馨提示',
        description: '请联系管理员配置该目录下的菜单权限',
      })
    }
    for (let i = 0; i < subAccessList.length; i++) {
      if (!subAccessList[i].accessUrl) {
        const result = filterNestedArray(subAccessList[i], condition);
        if (result) {
          return result;
        }
      } else if (typeof subAccessList[i] === 'object') {
        if (condition(subAccessList[i])) {
          return subAccessList[i];
        }
      }
    }
    return null;
  }
  useEffect(() => {
    setMenuMove({ visible: false, data: {} });
  }, [showMenu])
  const showMenuStyle = showMenu ? {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    display: 'flex',
    alignItems: 'center',
    lineHeight: 1,
    minHeight: 45,
    width: 100,
    textIndent: 8,
  } : {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    display: 'flex',
    alignItems: 'center',
    lineHeight: 1,
    minHeight: 45,
    textIndent: 8,
  }
  return (
    <div className="HeaderMenu_box">
      <div
        onMouseLeave={(e) => {
          e.stopPropagation();
          setMenuMove({ visible: false, data: {} });
        }}
        className="HeaderMenu_sidebar_wrap"
      >
        <div style={{ zIndex: 1 }} className="HeaderMenu_menu_box">
          <div className="HeaderMenu_logo_box">
            <div className="HeaderMenu_logo_wrap">
              <img src={logo} />
            </div>
          </div>

          {menuList.map((item, index) => {
            const { accessName, accessIcon } = item;
            return (
              <div
                key={index}
                onClick={() => {
                  const linkData = filterNestedArray(item, (obj) => {
                    if (obj.accessUrl) {
                      return true;
                    }
                  });
                  history.push({
                    pathname: linkData.accessUrl,
                    query: {
                      accessId: linkData.id,
                    },
                  });
                  // setMenuVisible({ data: item });
                }}
                className={`sideMenu_item ${showMenu ? '' : 'collapsed'}`}
              >
                <div
                  style={showMenuStyle}
                  className={
                    menuVisible.data.id && menuVisible.data.id === item.id
                      ? 'HeaderMenu_active'
                      : menuMove.data.id && menuMove.data.id === item.id
                        ? 'HeaderMenu_hover'
                        : null
                  }
                >
                  <i onMouseMove={(e) => {
                    e.stopPropagation();
                    if (!showMenu) {
                      setMenuMove({
                        data: { ...item },
                      });
                    }

                  }} className="sideMenu_icon">
                    <img src={iconModule[accessIcon]} />
                  </i>
                  {showMenu ? accessName : ''}
                </div>
                {menuMove.data.id === item.id ? <div className="hover-arrow"></div> : null}
              </div>
            );
          })}
          {bottomAccessList.map((item, index) => {
            const { accessName, accessIcon = 'After' } = item;
            return (
              <div
                key={index}
                className="sideMenu_item_absolute"
                onClick={() => {
                  const linkData = filterNestedArray(item, (obj) => {
                    if (obj.accessUrl) {
                      return true;
                    }
                  });
                  history.push({
                    pathname: linkData.accessUrl,
                    query: {
                      accessId: linkData.id,
                    },
                  });
                  // setMenuVisible({ data: item });
                }}
              >
                <div
                  style={{
                    ...showMenuStyle
                  }}

                  className={
                    menuVisible.data.id && menuVisible.data.id === item.id
                      ? 'HeaderMenu_active'
                      : menuMove.data.id && menuMove.data.id === item.id
                        ? 'HeaderMenu_hover'
                        : null
                  }
                >
                  <i onMouseMove={(e) => {
                    e.stopPropagation();
                    if (!showMenu) {
                      setMenuMove({
                        data: { ...item },
                      });
                    }

                  }} className="sideMenu_icon">
                    <img src={iconModule[accessIcon]} />
                  </i>
                  {showMenu ? accessName : ''}
                </div>
                {menuMove.data.id === item.id ? <div className="hover-arrow"></div> : null}
              </div>
            );
          })}
          {/* <BottomMenu list={bottomAccessList}></BottomMenu> */}
          {showMenu ? <MenuFoldOutlined onClick={() => setShowMenu(false)} className='show_menu_icon'></MenuFoldOutlined> : <MenuUnfoldOutlined onClick={() => setShowMenu(true)} className='show_menu_icon'></MenuUnfoldOutlined>}
        </div>

        {showMenu && <Menu accessId={accessId} data={menuVisible.data} ></Menu>}
        <MoveMenu accessId={accessId} data={menuMove.data} />
      </div>
    </div>
  );
};
